<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="../../../../lib/html5shiv.js?rev=@@hash"></script>
	<script type="text/javascript" src="../../../../lib/respond.min.js?rev=@@hash"></script>
	<![endif]-->
	<!--引入分页-->
	<link rel="stylesheet" href="../../../../lib/pagination/pagination.css">
	<link rel="stylesheet" type="text/css" href="../../../../static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../../static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="../../../../lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="../../../../static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="../../../../static/h-ui.admin/css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../../../ht-css/Project.css" />
	<!--表单验证-->
	<link rel="stylesheet" type="text/css" href="../../../../lib/Validform/5.3.2/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="../../../../lib/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="../../../../ht-css/style-q.css" />
	<link rel="stylesheet" href="../../../../ht-css/combo.select.css">
	<title>商品管理</title>
	<style>
		.relation {
			background: #FFFFFF;
			border: 1px solid #00a0e9;
		}

		.relation li {
			line-height: 2;
		}

		.relation li:hover {
			background: #00a0e9;
			color: #FFFFFF;
		}

		.guanlian {
			position: absolute;
			top: 35px;
			width: 100%;
			overflow-y: scroll;
			max-height: 150px;
			display: none;
		}

		.guanlian li {
			text-indent: 20px;
		}

		.pagination li {
			float: left;
			margin-left: 5px;
			width: 26px;
			height: 26px;
			border: 1px solid #ccc;
			text-align: center;
			color: #666;
		}

		.pagination li:hover {
			background-color: #5a98de;
		}

		.pagination li:hover a {
			color: #fff;
		}
	</style>
</head>

<body>
<article class="page-container">
	<div class="ml-20 mr-20" id="spuInfo" method="post">
		<div id="tab_topnav" class="HuiTab">
			<div class="tabCon pd-5 bg-1 bk-gray pb-10" style="display: block">
				<div class="lh-30 pd-10">
					<form>
						<table class="table-hover table_li ml-10 mb-10 table">
							<thead class="text-l">

							<tr>
								<td class="col-3-1">
									<div class="row ml-10">
										<label class="form-label f-l pt-5">商品名称/商品编码：</label>
										<div class="formControls col-xs-8 col-sm-9" style="width: 283px;">
											<input type="text" class="input-text radius" name="imgname"  autocomplete="off" onclick="myFunction()" onchange="myFunction()" oninput="myFunction()" id="nameOrCode" placeholder="输入商品名称/商品编码" datatype="/^[a-zA-Z0-9\u4e00-\u9fa5]{0,50}$/" errormsg="格式错误，请重新输入" ignore="ignore">
											<ul class="relation radius guanlian" id="tuan" style="width:93%;z-index: 1">
												<li>无数据</li>
											</ul>
										</div>
									</div>
									<input style="margin-right: 467px" id="btsn1" type="button" class="btn btn-secondary radius size-S botter" onclick="img_list()" value="&nbsp;查&nbsp;&nbsp;询&nbsp;">
								</td>
							</tr>
							</thead>
						</table>
					</form>
					<div class="line"></div>
					<ul id="imgListBox" class="ml-10 sale_pic clearfix">
					</ul>
					<!--<div class="dataTables_wrapper goods_fanye clearfix">
						<div class="f-r pageturning M-box3"></div>
					</div>-->
					<div class="text-c mb-10">
						<input  type="reset" onclick="cancle()" class="btn radius size-S botter ml-10" value="&nbsp;取&nbsp;&nbsp;消&nbsp;">
						<input  type="button" class="btn btn-secondary radius size-S botter" onclick="makeSure()" value="&nbsp;确&nbsp;&nbsp;定&nbsp;">
					</div>
				</div>
			</div>

		</div>
	</div>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../../../../lib/jquery/1.9.1/jquery.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/layer/2.4/layer.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../static/h-ui/js/H-ui.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../static/h-ui.admin/js/H-ui.admin.js?rev=@@hash"></script>
<!--/_footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../../../lib/My97DatePicker/4.8/WdatePicker.js?rev=@@hash"></script>
<!--表单验证-->
<script type="text/javascript" src="../../../../lib/Validform/5.3.2/Validform_v5.3.2_min.js?rev=@@hash"></script>
<script src="../../../../lib/pagination/jquery.pagination.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/datatables/1.10.0/jquery.dataTables.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/laypage/1.2/laypage.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../ht-js/frame/doT.min.js?rev=@@hash"></script>
<script type="text/javascript" src="../../../../lib/jquery.combo.select.js?rev=@@hash"></script>
<script src="../../../../ht-js/public.js?rev=@@hash"></script>
<!--验证token-->
<script src="../../../../ht-js/verifyToken.js?rev=@@hash"></script>
<script src="../../../../ht-js/Project.js?rev=@@hash"></script>
<script>
	var ids=""
	var names=""
	//商品名称下拉渲染
	function myFunction(){
		var nameOrCode=$("#nameOrCode").val();
		$.ajax({
			/*root.inter.produceFictitiousContract*/
			url:'https://'+ window.location.host +'/api/admin/aproduct/integralSku/findSkuNamesDropDown',
			contentType: "application/json;charset=UTF-8",
			cache: false,  //禁用缓存
			type: "POST",
			dataType:'json',
			data: JSON.stringify({
				"nameOrCode":nameOrCode,
			}),
			success: function (data) {
				if(data.errorCode=="0"){
					var jsonObj =data.data;
					if(jsonObj==""){
						$("#tuan").html("<li>无数据</li> ");
					}else {
						var optionstring = "";
						for (var  i= 0; i < jsonObj.length; i++) {
							optionstring += "<li onclick='relation(\""+jsonObj[i]+"\")' data-align=\"" + jsonObj[i] + "\" > " + jsonObj[i] + "</li>";
						}
						$("#tuan").html(optionstring);
					}
				}else{
					$("#tuan").html("<li>无数据</li> ");
				}

			},
			error: function () {
				$.Huimodalalert('失败！',2000);
			}
		})
	}
	$("#nameOrCode").focus(function () {
		$("#tuan").show()
	});
	$(document).bind("click",function(e){
		//id为menu的是菜单，id为open的是打开菜单的按钮
		if($(e.target).closest("#tuan").length == 0 && $(e.target).closest("#nameOrCode").length == 0){
			//点击id为menu之外且id不是不是open，则触发
			$("#tuan").hide()
		}
	})
	function relation(ce) {
		$("#nameOrCode").val(ce)
		$("#tuan").hide()
	}




	$(document).ready(function () {
		if (sessionStorage.getItem("isadd") == "false") {
			$("#fileUp").removeAttr("multiple");
		}
	});
    var firstSkuImgCache = JSON.parse(sessionStorage.getItem("skuImgCache"));


    var btnCount = 0;
    var JsonObject =JSON.parse(decodeURIComponent(web.readCookie("loginData")));


    function saveImg(el) {
    	var span0=$(el).find('span')[0]
		var span1=$(el).find('span')[1]

            if(!$(el).hasClass("onpic")){
                el.classList.add("onpic");
                var num = $(el).find('span')[0];
                var imgId = $(num).html();
                var onPicEl = document.getElementsByClassName("onpic").length;
				ids= $(span0).html()
				names=$(span1).html()

                if(1 < onPicEl ){
                    $.Huimodalalert('只能选择一张图片', 2000);
                    $(el).removeClass("onpic");
                    return false;
                }
            }else {
				ids= ""
				names=""
                $(el).removeClass("onpic");
            }

    }

	//确认
    function makeSure() {
    	if(ids==""){
			$.Huimodalalert('请选择商品', 2000);
		}else {
			sessionStorage.setItem("codes",ids)
			sessionStorage.setItem("names",names)
			window.parent.Rendering();
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}

	}
    /*商品图片管理-----------------------------------------------------------------------------------------------------------*/
    function imgGoods_listCategory(categoryLevel) {
        var categoryName = $("#imgClass1").val();
        var user_data = {
            categoryLevel: categoryLevel,
            categoryName: $("#imgClass1").val(),
        }
        var succCallBack = function(data, status, response) {
            console.log(data)
            if(data.errorCode == "0") {
                if(data.data == null) {
                    classStr = "<li>无数据</li>"
                    $("#img-classUl1").html(classStr);
                } else {
                    var classStr = "";
                    for(var i = 0; i < data.data.length; i++) {
                        classStr += "<li onclick='imgNextClass(" + data.data[i].category_id + "," + data.data[i].category_level + ",\"" + data.data[i].category_name + "\")'>" + data.data[i].category_name + "</li>"
                    }
                    $("#img-classUl1").html(classStr);
                }
            }
        }
        web.doAjax(root.goodsInter.categoryByParam, 'post', user_data, succCallBack);
    }

    //获取光标
    $("#imgClass1").focus(function() {
        $("#img-classUl1").show();
        imgGoods_listCategory(1, 1);
    });
    $(document).bind("click", function(e) {
        //id为menu的是菜单，id为open的是打开菜单的按钮
        if($(e.target).closest("#img-classUl1").length == 0 && $(e.target).closest("#imgClass1").length == 0) {
            //点击id为menu之外且id不是不是open，则触发
            $("#img-classUl1").hide()
        }
    });

    // 2,3,4级的模糊查询
    function imgGetNext_input(level, category_id) {
        if(level < 4) {
            $("#imgClass" + level + "")[0].oninput = function() {
                console.log(111)
                imgGoods_listCategory(level, level, category_id);
            }
            //获取光标
            $("#imgClass" + level + "").focus(function() {
                $("#img-classUl" + level + "").show();
                imgGoods_listCategory(level, level, category_id);
            });
            $(document).bind("click", function(e) {
                //id为menu的是菜单，id为open的是打开菜单的按钮
                if($(e.target).closest("#img-classUl" + level + "").length == 0 && $(e.target).closest("#imgClass" + level + "").length == 0) {
                    //点击id为menu之外且id不是不是open，则触发
                    $("#img-classUl" + level + "").hide()
                }
            });
        }

    }
    var oneCategoryId = "";
    var twoCategoryId = "";
    var threeCategoryId = "";

    function imgNextClass(category_id, level, category_name) {
        if(level == 1) {
            oneCategoryId = category_id;
        } else if(level == 2) {
            twoCategoryId = category_id;
        } else if(level == 3) {
            threeCategoryId = category_id;
        }
        $("#imgClass" + level + "").val(category_name)
        var user_data = {
            parentCateId: category_id
        }
        var succCallBack = function(data, status, response) {
            console.log(data)
            if(data.errorCode == "0") {
                if(data.data == null) {
                    classStr = "<li>无数据</li>";
                } else {
                    var classStr = "";
                    for(var i = 0; i < data.data.length; i++) {
                        classStr += "<li onclick='imgNextClass(" + data.data[i].category_id + "," + data.data[i].category_level + ",\"" + data.data[i].category_name + "\")'>" + data.data[i].category_name + "</li>"
                    }
                }
                if(data.data[0] == undefined) {
                    classValue = category_id;
                    var nextLevel = level + 1;
                    $("#img-classUl" + nextLevel + "").html(classStr);
                    $("#img-classUl" + level + "").hide();
                } else {
                    var nextLevel = data.data[0].category_level;
                    $("#img-classUl" + nextLevel + "").html(classStr);
                    $("#img-classUl" + nextLevel + "").show();
                    $("#img-classUl" + level + "").hide()
                }
            }
        }
        imgGetNext_input(level + 1, category_id);
        web.doAjax(root.goodsInter.categoryByParam, 'post', user_data, succCallBack);
    }
    $(".classForm").Validform({
        tiptype: 2,
        callback: function(form) {
            img_list()
            return false;
        }
    });
    var totalPage = 1;
	//查询
    function img_list() {
		if($("#nameOrCode").val()==""){
			$.Huimodalalert('请输入商品名称/商品编码', 2000);
			return false;
		}
        $.ajax({
            contentType: "application/json",
            type: "POST",
            url: 'https://'+ window.location.host +'/api/admin/aproduct/integralSku/selectIntegralSkuByName',
            cache: false, //禁用缓存
            dataType: "json",
            data: JSON.stringify({
                "name": $("#nameOrCode").val(),
            }),
            success: function(data) {
            	console.log(data)
                if(data.errorCode == 0) {
                    var imgHtmlStr = "";
                    var integralSkuName=""
                    if(data.data != null) {
                        for(var i = 0; i < data.data.length; i++) {
                            if (data.data[i].integralSkuName != "" && data.data[i].integralSkuName != "null") {
								integralSkuName=data.data[i].integralSkuName
                            }else {
								integralSkuName=""
							}
                            if (data.data[i].integralSkuImgs != "" &&  data.data[i].integralSkuImgs != "null") {
                                imgHtmlStr += '<li onclick="saveImg(this)"><img src="' + data.data[i].integralSkuImgs[0].imgUrl + '"><div class="num" style="display: none"> <span id="num">' + data.data[i].integralSkuCode + '</span></div><div class="name"><span>' + integralSkuName + '</span></div></li>';
                            }else {
								imgHtmlStr += '<li onclick="saveImg(this)"><img src=""><div class="num" style="display: none"> <span id="num">' + data.data[i].integralSkuCode + '</span></div><div class="name"><span>' + integralSkuName + '</span></div></li>';

							}
                        }
                        $("#imgListBox").html(imgHtmlStr);
                    }

                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest);
            }
        });
    }

    function cancle() {
        var index = parent.location.reload();
        parent.layer.close(index);
    }
    // 提示信息
    function showmsg(msg,icon){
        layer.msg(msg, {
            icon:icon,
            time: 1000
        },function(){
            if(icon==6){
                var index =  parent.location.reload();
                parent.layer.close(index);
            }
        });
    }

    /*tab切换*/
    jQuery.Huitab = function (tabBar, tabCon, class_name, tabEvent, i) {
        var $tab_menu = $(tabBar);
        // 初始化操作
        $tab_menu.removeClass(class_name);
        $(tabBar).eq(i).addClass(class_name);
        $(tabCon).hide();
        $(tabCon).eq(i).show();

        $tab_menu.bind(tabEvent, function () {
            $tab_menu.removeClass(class_name);
            $(this).addClass(class_name);
            var index = $tab_menu.index(this);
            $(tabCon).hide();
            $(tabCon).eq(index).show()
        })
    }
    $(function () {
        $.Huitab("#tab_topnav .tabBar span", "#tab_topnav .tabCon", "current", "click", "0")
    });

</script>
</body>
</html>